<template>
  <div class="music_popup">
    <img :src="songItemAl.picUrl ?? songItemAl.img1v1Url" alt="" class="img" />
    <div class="popup_top">
      <svg class="icon iconPT" aria-hidden="true">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <div class="top_text">
        <p class="divP">
          <vue3-marquee>{{ songItem.name }} </vue3-marquee>
        </p>
        <span class="divSpan" v-if="songItem.ar">
          {{ songItem.ar[0].name }}
          <svg class="icon iconSP" aria-hidden="true">
            <use xlink:href="#icon-xiangyoujiantou"></use>
          </svg>
        </span>
        <span class="divSpan" v-else>
          {{ songItem.artists[0].name
          }}<svg class="icon iconSP" aria-hidden="true">
            <use xlink:href="#icon-xiangyoujiantou"></use>
          </svg>
        </span>
      </div>
      <div class="top_right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
    </div>
    <div class="popup_center" @click="showLyric">
      <div v-show="isShowLyric" class="popup_center_div">
        <img
          src="@/assets/指针.png"
          alt=""
          :class="[isPlay ? 'img_needle_active' : 'img_needle']"
        />
        <img src="@/assets/歌盘.png" alt="" class="img_cd" />
        <img
          :src="songItemAl.picUrl ?? songItemAl.img1v1Url"
          alt=""
          class="img_ar"
          :class="{ img_ar_active: isPlay, img_ar_paused: !isPlay }"
        />
      </div>
      <div v-show="!isShowLyric" class="songLyric" ref="musicLyric">
        <div v-for="(item, index) of handelSongLyric" :key="index">
          <!-- min, sec, mill, lrc -->
          <!-- <span>{{ item.min }}</span>
          <span>{{ item.sec }}</span>
          <span>{{ item.mill }}</span> -->
          <!-- 最后一句的nextLine为nan 为了使最后一句也显示高亮将和下一句歌词时间作对比都改为了false再取反就为true了 -->
          <span
            :class="{
              spanActiveT: !(songTime * 1000 > item.nextLine) && songTime * 1000 > item.time
            }"
            >{{ item.lrc }}</span
          >
        </div>
      </div>
    </div>
    <div class="popup_bottom">
      <div class="bottom_top">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-aixin"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yinlechangpian"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-31xiaoxi"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liebiao-"></use>
        </svg>
      </div>
      <div class="bottom_center">
        <!--     -->
        <span class="bottom_time">{{ handelTime(audioPopup.currentTime) }}</span>
        <input
          type="range"
          ref="progress"
          min="0"
          :max="audioPopup.duration"
          step="1"
          v-model.lazy="audioPopup.currentTime"
          class="range"
        />
        <span class="bottom_time">{{ handelTime(audioPopup.duration) ?? '00:00' }}</span>
      </div>
      <div class="bottom_footer">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liebiaoxunhuan"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="OnA">
          <use xlink:href="#icon-shangyishoushangyige"></use>
        </svg>
        <svg class="icon iconBig" aria-hidden="true" @click="play" v-if="!isPlay">
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <svg class="icon iconBig" aria-hidden="true" @click="play" v-else>
          <use xlink:href="#icon-zanting"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="next">
          <use xlink:href="#icon-xiayigexiayishou"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-quanxuan"></use>
        </svg>
      </div>
    </div>
  </div>
</template>
<!-- width: 4rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -->
<script lang="ts" setup>
import { withDefaults, defineProps, ref, computed, watch } from 'vue'
import { useStore } from '@/store'

const store = useStore()
const props = withDefaults(
  defineProps<{
    audio: any
  }>(),
  {}
)

// 拿到票 歌曲，专辑信息，歌曲下标
const songItem = computed(() => store.state.songList.songItem)
const songItemAl = computed(() => store.state.songList.songItemAl)
const songItemIndex = computed(() => store.state.songList.songItemIndex)
//播放
//拿到父组件的audio实例
const audioPopup = ref(props.audio)
console.log(audioPopup)

//拿到vuex的boolean来控制播放器
//并且控制歌词定时器
const isPlay = computed(() => store.state.songList.isPlay)
//拿到vuex的boolean来控制显示歌词还是歌盘
const isShowLyric = computed(() => store.state.songList.isShowLyric)
//拿到歌词
const songLyric = computed(() => store.state.songList.songLyricData)
console.log(songLyric.value)

//拿到当前audio中的当前时间与歌词对象里面的时间进行比较
const songTime = computed(() => store.state.songList.presentTime)
console.log('6')
//处理歌词
const handelSongLyric = computed(() => {
  let arr: any
  if (songLyric.value) {
    arr = songLyric.value.split(/[(\r\n)\r\n]+/).map((item: string, i: number) => {
      let min = item.slice(1, 3)
      let sec = item.slice(4, 6)
      let mill = item.slice(7, 10)
      let lrc = item.slice(11)
      let time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
      if (isNaN(Number(mill))) {
        mill = item.slice(7, 9)
        lrc = item.slice(10)
        time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
      }
      return { min, sec, mill, lrc, time }
    })
  } else {
    const NotFind = '还未有歌词上传'
    return NotFind
  }
  //给每句歌词对象添加上下一句歌词时间的属性 将当前这一句歌词的时间和下一句歌词的时间与vuex的当前时间进行比较然后动态添加类名进行渲染
  arr.forEach((item: any, index: number) => {
    if (index === arr.length - 1) {
      item.nextLine = 1
      item.time = 0
    } else {
      item.nextLine = arr[index + 1].time
    }
  })
  return arr
})

//歌词定时器
//将歌曲当前播放的时间传过去
const changePT = () => {
  store.commit('songList/changePresentTime', props.audio.currentTime)
  console.log('p')
}
const removeSET = () => {
  clearInterval(timer)
}
//接受定时器
let timer = 0
//暂停和播放的切换
const play = () => {
  audioPopup.value.autoplay = true
  if (!isPlay.value) {
    audioPopup.value.play()
    store.commit('songList/changeIsPlayT')
    removeSET()
    timer = setInterval(changePT, 500)
  } else {
    audioPopup.value.pause()
    store.commit('songList/changeIsPlayF')
    for (let i = 1; i <= timer; i++) {
      clearInterval(i)
    }
  }
}
//显示歌盘与歌词的切换
const showLyric = () => {
  store.commit('songList/changeIsShowLyric')
  console.log(handelSongLyric.value)
}
//更换歌曲自动播放
watch(
  () => songItem.value.id,
  () => {
    store.commit('songList/changeIsPlayT')
  }
)
//歌词滚动
// musicLyric
const musicLyric = ref()

watch(songTime, () => {
  let span: any = document.querySelector('span.spanActiveT')
  if (span) {
    //  musicLyric.value.scrollTop = span.offsetTop - 300
    if (span.offsetTop > 100) {
      // const distance = span.offsetTop - 100
      // divSong.style.transform = `translateY(-${distance}px)`
      musicLyric.value.scrollTop = span.offsetTop - 300
    }
  }
})
//下一首上一首歌曲功能实现
// currentSrc
//拿到歌单
const songTable = computed(() => store.state.songList.songListData)
console.log(songTable.value)

//下一个
const next = () => {
  const queryInfo = {
    pageName: '/lyric',
    id: '',
    loading: false
  }
  if (songItemIndex.value === songTable.value.length - 1) {
    const songInfo = songTable.value[0]
    const songId = songInfo.id
    audioPopup.value.src = `https://music.163.com/song/media/outer/url?id=${songId}.mp3`
    audioPopup.value.load()
    //传入新的歌曲信息
    store.commit('songList/changeSongItemInfo', {
      songItem: songInfo,
      songItemAl: songInfo.al ?? songInfo.album.artist,
      songItemIndex: 0
    })
    queryInfo.id = songId
    store.dispatch('songList/getSongInfoList', queryInfo)
  } else {
    const songInfo = songTable.value[songItemIndex.value + 1]
    const songId = songInfo.id
    audioPopup.value.src = `https://music.163.com/song/media/outer/url?id=${songId}.mp3`
    audioPopup.value.load()
    //传入新的歌曲信息
    store.commit('songList/changeSongItemInfo', {
      songItem: songInfo,
      songItemAl: songInfo.al ?? songInfo.album.artist,
      songItemIndex: songItemIndex.value + 1
    })
    queryInfo.id = songId
    store.dispatch('songList/getSongInfoList', queryInfo)
  }
}
//上一个
const OnA = () => {
  const queryInfo = {
    pageName: '/lyric',
    id: '',
    loading: false
  }
  if (songItemIndex.value === 0) {
    const songInfo = songTable.value[songTable.value.length - 1]
    const songId = songInfo.id
    audioPopup.value.src = `https://music.163.com/song/media/outer/url?id=${songId}.mp3`
    audioPopup.value.load()
    //传入新的歌曲信息
    store.commit('songList/changeSongItemInfo', {
      songItem: songInfo,
      songItemAl: songInfo.al ?? songInfo.album.artist,
      songItemIndex: songItemIndex.value - 1
    })
    queryInfo.id = songId
    store.dispatch('songList/getSongInfoList', queryInfo)
  } else {
    const songInfo = songTable.value[songItemIndex.value - 1]
    const songId = songInfo.id
    audioPopup.value.src = `https://music.163.com/song/media/outer/url?id=${songId}.mp3`
    audioPopup.value.load()
    //传入新的歌曲信息
    store.commit('songList/changeSongItemInfo', {
      songItem: songInfo,
      songItemAl: songInfo.al ?? songInfo.album.artist,
      songItemIndex: songTable.value.length - 1
    })
    queryInfo.id = songId
    store.dispatch('songList/getSongInfoList', queryInfo)
  }
}
//对进度条两侧时间格式进行处理
const handelTime = (num: any) => {
  let min = Math.floor(num / 60)
  let sec: any = Math.floor(num - min * 60)
  if (sec < 10) {
    sec = '0' + sec
  }
  return `${min}:${sec}`
}
watch(songTime, (newValue: any) => {
  if (parseInt(newValue) === parseInt(audioPopup.value.duration)) {
    next()
  }
})

const showVal = () => {
  console.log('8')
}
</script>

<style scoped lang="less">
.music_popup {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .img {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    filter: blur(160px);
  }
  .popup_top {
    width: 100%;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 0.2rem;
    padding-bottom: 0;
    .iconPT {
    }
    .top_text {
      display: flex;
      flex-direction: column;
      justify-items: center;
      position: absolute;
      left: 1rem;
      .divP {
        width: 2rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        line-height: 0.5rem;
      }
      .divSpan {
        width: 3rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        line-height: 0.5rem;
        .iconSP {
          width: 0.25rem;
          height: 0.25rem;
        }
      }
    }
  }
  .popup_center {
    width: 100%;
    height: 8.5rem;
    .songLyric {
      width: 100%;
      height: 8.5rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: scroll;
      span {
        color: rgb(144, 143, 143);
        line-height: 0.85rem;
      }
      .spanActiveT {
        color: rgb(255, 255, 255);
        transition: 2s;
      }
    }

    .popup_center_div {
      width: 100%;
      height: 9rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }

    .img_needle {
      width: 2.4rem;
      height: 3rem;
      position: absolute;
      left: 46%;
      top: 0.5rem;
      transform-origin: 0 0;
      transform: rotate(-20deg);
      transition: all 2s;
    }
    .img_needle_active {
      width: 2.4rem;
      height: 3rem;
      position: absolute;
      left: 46%;
      top: 0.5rem;
      transform-origin: 0 0;
      // transform: rotate(-15deg);
      transition: all 2s;
    }

    .img_cd {
      width: 5.8rem;
      height: 5.8rem;
      position: absolute;
      bottom: 1.6rem;
      z-index: -1;
    }
    .img_ar {
      width: 3.6rem;
      height: 3.6rem;
      border-radius: 50%;
      position: absolute;
      bottom: 2.7rem;
      animation: xz 10s linear infinite;
    }
    .img_ar_active {
      animation-play-state: running;
    }
    .img_ar_paused {
      animation-play-state: paused;
    }
    @keyframes xz {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }
  }
  .popup_bottom {
    display: flex;
    flex-direction: column;
    position: relative;
    .bottom_top {
      position: relative;
      display: flex;
      justify-content: space-around;
      padding-top: 0.2rem;
    }
    .bottom_center {
      width: 100%;
      height: 1.4rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .range {
        flex: 6;
        height: 0.03rem;
      }
      .bottom_time {
        flex: 1;
        text-align: center;
      }
    }

    .bottom_footer {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 0.4rem;
      .iconBig {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}
</style>
